<template>
  <div class="swiper">
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item :key="item.url" v-for="item in banners">
        <img class="define-image" :src="item.pic" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  props: {
    banners: {
      type: Array,
    },
  },
};
</script>

<style lang='scss' scoped>
.swiper {
  margin-bottom: 67px;
  .my-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
      height: 180px;
      width: 315px !important;
      margin: 0 auto;
      .define-image {
        height: 180px;
        width: 100%;
      }
    }
  }
}
</style>